<template>
  <div class="default-main yaoping-box">

      <!-- 两栏布局 -->
      <div class="yaoping-layout">
          <!-- 左侧药品区域 -->
          <div class="left-panel">
              <!-- 顶部搜索 -->
              <div class="search-container">
                  <el-input
                      v-model="searchKeyword"
                      placeholder="搜索药品名称/编码"
                      class="search-input"
                      prefix-icon="Search"
                      clearable
                      @input="filterMedicines"
                  />
                  <el-button type="primary" @click="filterMedicines" :icon="Search">搜索</el-button>
              </div>

              <!-- 药品块状列表 -->
              <div class="medicine-grid">
                  <div 
                      v-for="item in displayedMedicines" 
                      :key="item.id"
                      class="medicine-block"
                      @click="addToSelected(item)"
                  >
                      <div class="medicine-title">{{ item.name }}</div>
                      <div class="medicine-details">
                          <span v-if="Number(item.g_price) > 0">克价: {{ Number(item.g_price).toFixed(5) }}元</span>
                          <!-- <span v-if="Number(item.dai_price) > 0">袋价: {{ Number(item.dai_price).toFixed(5) }}元</span>
                          <span v-if="Number(item.kg_price) > 0">公斤价: {{ Number(item.kg_price).toFixed(5) }}元</span> -->
                          <span>规格: {{ item.guige }}</span>
                          <span v-if="item.level">等级: {{ item.level }}</span>
                          <span v-if="item.address">产地: {{ item.address }}</span>
                      </div>
                  </div>
              </div>
          </div>
          
          <!-- 右侧区域 -->
          <div class="right-panel" :class="{ 'has-items': selectedItems.length > 0 }">
              <div class="selected-area">
                  <!-- 患者信息区域 -->
                  <div class="patient-info-section">
                      <h3>患者信息</h3>
                      <div class="patient-form">
                          <el-form :model="patientInfo" label-position="top" size="small">
                              <el-row :gutter="10">
                                  <el-col :span="12">
                                      <el-form-item label="姓名">
                                          <el-input v-model="patientInfo.patientName" placeholder="请输入姓名"></el-input>
                                      </el-form-item>
                                  </el-col>
                                  <el-col :span="12">
                                      <el-form-item label="性别">
                                          <el-select v-model="patientInfo.gender" placeholder="请选择性别" style="width: 100%">
                                              <el-option :label="'男'" :value="1" />
                                              <el-option :label="'女'" :value="2" />
                                          </el-select>
                                      </el-form-item>
                                  </el-col>
                              </el-row>
                              <el-row :gutter="10">
                                  <el-col :span="12">
                                      <el-form-item label="年龄">
                                          <el-input-number v-model="patientInfo.age" :min="0"  style="width: 100%"></el-input-number>
                                      </el-form-item>
                                  </el-col>
                                  <el-col :span="12">
                                      <el-form-item label="联系电话">
                                          <el-input v-model="patientInfo.phone" placeholder="请输入联系电话"></el-input>
                                      </el-form-item>
                                  </el-col>
                              </el-row>
                              <el-form-item label="地址">
                                  <el-input v-model="patientInfo.address" placeholder="请输入地址"></el-input>
                              </el-form-item>
                              <el-form-item label="身份证号">
                                  <el-input v-model="patientInfo.idCardNumber" placeholder="请输入身份证号"></el-input>
                              </el-form-item>
                              <el-form-item label="备注">
                                  <el-input
                                      type="textarea"
                                      v-model="patientInfo.remark"
                                      placeholder="请输入备注"
                                      :rows="3"
                                  ></el-input>
                              </el-form-item>
                          </el-form>
                      </div>
                  </div>

                  <div class="selected-header">
                      <h3>已选药品</h3>
                      <div class="actions">
                          <el-button type="info" size="small" @click="viewPrescriptionHistory">查看历史记录</el-button>
                          <el-button type="danger" size="small" @click="clearSelected">清空</el-button>
                          <el-button type="primary" size="small" @click="printReceipt">打印小票</el-button>
                      </div>
                  </div>
                  
                  <!-- 竖形列表 -->
                  <div class="selected-list" v-if="selectedItems.length > 0">
                      <div v-for="(item, index) in selectedItems" :key="item.id" class="selected-item">
                          <div class="item-header">
                              <span class="item-name">{{ item.name }}</span>
                              <el-button 
                                  type="danger" 
                                  circle
                                  size="small" 
                                  @click="removeSelectedItem(index)"
                                  :icon="Delete"
                              ></el-button>
                          </div>
                          
                          <div class="item-quantities">
                              <div class="quantity-input">
                                  <label>克数:</label>
                                  <el-input-number 
                                      v-model="item.grams" 
                                      :min="0" 
                                      :precision="0"
                                      size="small"
                                      @change="() => updateItemPrice(item, 'grams')"
                                  ></el-input-number>
                              </div>
                              

                              
                              <!-- <div class="quantity-input">
                                  <label>袋数:</label>
                                  <el-input-number 
                                      v-model="item.bags" 
                                      :min="0" 
                                      :precision="2"
                                      size="small"
                                      @change="() => updateItemPrice(item, 'bags')"
                                  ></el-input-number>
                              </div>
                              
                              <div class="quantity-input">
                                  <label>公斤数:</label>
                                  <el-input-number 
                                      v-model="item.kilograms" 
                                      :min="0" 
                                      :precision="2"
                                      size="small"
                                      @change="() => updateItemPrice(item, 'kilograms')"
                                  ></el-input-number>
                              </div> -->
                          </div>
                          
                          <div class="item-price">
                              <span class="price-label">单价:</span>
                              <span class="price-value">{{ item.unitPriceFormatted || '--' }}</span>
                              <span class="price-label">小计:</span>
                              <span class="price-value total">{{ item.totalPrice.toFixed(2) }}元</span>
                          </div>
                      </div>
                  </div>
                  
                  <div class="empty-message" v-else>
                      <el-empty description="暂无已选药品"></el-empty>
                  </div>
                  
                  <div class="total-price" v-if="selectedItems.length > 0">
                      <div class="price-calculation">
                          <div class="single-dose-price">
                              <span>单剂价格: {{ singleDosePrice.toFixed(2) }}元</span>
                          </div>
                          <div class="dose-and-total">
                              <div class="dose-input">
                                  <label>剂量(包数):</label>
                                  <el-input-number 
                                      v-model="prescriptionDose" 
                                      :min="1" 
                                      :precision="0"
                                      size="small"
                                  ></el-input-number>
                              </div>
                              <div class="final-total">
                                  <span>总价: {{ finalTotalPrice.toFixed(2) }}元</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <!-- 打印区域 (隐藏) -->
      <div id="print-area" style="display: none;">
          <div class="receipt">
              <div class="receipt-header">
                  <div class="receipt-title">中药处方小票</div>
                  <div class="receipt-divider">--------------------------------</div>
                  <div class="receipt-date">日期: {{ new Date().toLocaleString() }}</div>
                  <div class="receipt-divider">--------------------------------</div>
              </div>
              
              <!-- 患者信息 -->
              <div class="patient-info-print" v-if="patientInfo.patientName">
                  <div class="receipt-subtitle">患者信息</div>
                  <div class="patient-info-item">姓名: {{ patientInfo.patientName }}</div>
                  <div class="patient-info-item" v-if="patientInfo.gender">性别: {{ patientInfo.gender === 1 ? '男' : patientInfo.gender === 2 ? '女' : '--' }}</div>
                  <div class="patient-info-item" v-if="patientInfo.age">年龄: {{ patientInfo.age }}岁</div>
                  <div class="patient-info-item" v-if="patientInfo.idCardNumber">身份证: {{ patientInfo.idCardNumber }}</div>
                  <div class="patient-info-item" v-if="patientInfo.phone">电话: {{ patientInfo.phone }}</div>
                  <div class="patient-info-item" v-if="patientInfo.remark">备注: {{ patientInfo.remark }}</div>
                  <div class="receipt-divider">--------------------------------</div>
              </div>
              
              <!-- 药品列表 -->
              <div class="receipt-subtitle">药品明细</div>
              <div class="receipt-items">
                  <div class="receipt-item-header">
                      <span class="item-name-header">药品名称</span>
                      <span class="item-qty">数量</span>
                      <span class="item-price">单价</span>
                      <span class="item-total">小计</span>
                  </div>
                  <div class="receipt-divider">--------------------------------</div>
                  
                  <div v-for="item in selectedItems" :key="item.id" class="receipt-item">
                      <div class="item-name">{{ item.name }}</div>
                      <div class="item-details">
                          <span class="item-qty">
                              {{ item.grams > 0 ? item.grams + '克' : '' }}
                              {{ item.bags > 0 ? item.bags + '袋' : '' }}
                              {{ item.kilograms > 0 ? item.kilograms + '公斤' : '' }}
                          </span>
                          <span class="item-price">{{ item.unitPriceFormatted }}</span>
                          <span class="item-total">{{ item.totalPrice.toFixed(2) }}元</span>
                      </div>
                  </div>
                  
                  <div class="receipt-divider">--------------------------------</div>
                  <div class="receipt-summary">
                      <div>单剂价格: {{ singleDosePrice.toFixed(2) }}元</div>
                      <div>剂量: {{ prescriptionDose }}剂</div>
                      <div class="final-total">总计: {{ finalTotalPrice.toFixed(2) }}元</div>
                  </div>
              </div>
              
              <div class="receipt-divider">--------------------------------</div>
              <div class="receipt-footer">
                  <div>谢谢惠顾，祝您早日康复!</div>
              </div>
          </div>
      </div>
      
      <!-- 处方历史记录抽屉 -->
      <sysPrescriptionRecordHistory ref="historyDrawerRef" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import sysPrescriptionRecordHistory from './sysPrescriptionRecordHistory.vue'
import { ElMessage } from 'element-plus'
import { Delete, Search } from '@element-plus/icons-vue'
import { getSysDrugsList } from '@/api/system/sysDrugs'
import { createSysPrescriptionRecord } from '@/api/system/sysPrescriptionRecord'

const route = useRoute()

defineOptions({
  name: 'sysPrescriptionRecord',
})

// 分页参数
const page = ref(1)
const pageSize = ref(2000) // 获取足够多的药品数据以便前端展示
const total = ref(0)

// 定义药品项类型（与数据库字段对应）
interface MedicineItem {
  ID: number
  CreatedAt?: string
  UpdatedAt?: string
  id: number
  name: string
  code: string
  g_price: number // decimal(18,8)
  dai_price: number // decimal(18,8)
  kg_price: number // decimal(18,8)
  guige: string
  level?: string
  address?: string
}

// 定义已选药品项类型
interface SelectedItem extends MedicineItem {
  grams: number
  bags: number
  kilograms: number
  totalPrice: number // 单个药品的小计价格
  unitPriceFormatted: string // 格式化后的单价
  quantityType: 'grams' | 'bags' | 'kilograms' | null // 选择的数量类型
}

// 搜索关键词
const searchKeyword = ref('')

// 所有药品数据
const allMedicines = ref<MedicineItem[]>([])

// 根据搜索过滤后的药品
const displayedMedicines = ref<MedicineItem[]>([])

// 已选择的药品项
const selectedItems = ref<SelectedItem[]>([])

// 处方剂量（包数）
const prescriptionDose = ref(1)

// 患者信息
const patientInfo = ref({
  id: 0,
  patientName: '',
  gender: 0,
  age: 0,
  phone: '',
  address: '',
  idCardNumber: '',
  remark: ''
})

// 单剂价格计算（所有药品的小计之和）
const singleDosePrice = computed(() => {
  return selectedItems.value.reduce((sum, item) => sum + item.totalPrice, 0)
})

// 最终总价计算（单剂价格 * 剂量）
const finalTotalPrice = computed(() => {
  return singleDosePrice.value * prescriptionDose.value
})

// 保持兼容性的总价计算
const totalPrice = computed(() => {
  return singleDosePrice.value
})

// 过滤药品
const filterMedicines = () => {
  if (!searchKeyword.value) {
      displayedMedicines.value = [...allMedicines.value]
      return
  }
  
  const keyword = searchKeyword.value.toLowerCase()
  displayedMedicines.value = allMedicines.value.filter(item => {
      return item.name.toLowerCase().includes(keyword) || 
             (item.code && item.code.toLowerCase().includes(keyword))
  })
}

// 添加药品到已选区域
const addToSelected = (item: MedicineItem) => {
  // 检查是否已经添加过
  const existingIndex = selectedItems.value.findIndex(selected => selected.id === item.id)
  
  if (existingIndex >= 0) {
      ElMessage.info('该药品已在已选列表中')
      return
  }
  
  // 添加到已选列表
  selectedItems.value.push({
      ...item,
      grams: 0,
      bags: 0,
      kilograms: 0,
      totalPrice: 0,
      unitPriceFormatted: '',
      quantityType: null
  })
}

// 更新单个药品项的价格
const updateItemPrice = (item: SelectedItem, type: 'grams' | 'bags' | 'kilograms') => {
  // 记录选择的数量类型
  item.quantityType = type
  
  // 清除其他数量字段，确保只使用一种数量单位
  if (type === 'grams' && item.g_price > 0) {
      item.bags = 0
      item.kilograms = 0
      item.unitPriceFormatted = `${Number(item.g_price).toFixed(5)}元/克`
      item.totalPrice = item.grams * Number(item.g_price)
  } else if (type === 'bags' && item.dai_price > 0) {
      item.grams = 0
      item.kilograms = 0
      item.unitPriceFormatted = `${Number(item.dai_price).toFixed(5)}元/袋`
      item.totalPrice = item.bags * Number(item.dai_price)
  } else if (type === 'kilograms' && item.kg_price > 0) {
      item.grams = 0
      item.bags = 0
      item.unitPriceFormatted = `${Number(item.kg_price).toFixed(5)}元/公斤`
      item.totalPrice = item.kilograms * Number(item.kg_price)
  } else {
      // 如果所选单位对应的价格为0，尝试使用其他可用的价格单位
      if (item.g_price > 0 && type === 'grams') {
          item.totalPrice = item.grams * Number(item.g_price)
          item.unitPriceFormatted = `${Number(item.g_price).toFixed(5)}元/克`
      } else if (item.dai_price > 0 && type === 'bags') {
          item.totalPrice = item.bags * Number(item.dai_price)
          item.unitPriceFormatted = `${Number(item.dai_price).toFixed(5)}元/袋`
      } else if (item.kg_price > 0 && type === 'kilograms') {
          item.totalPrice = item.kilograms * Number(item.kg_price)
          item.unitPriceFormatted = `${Number(item.kg_price).toFixed(5)}元/公斤`
      } else {
          item.totalPrice = 0
          item.unitPriceFormatted = '价格未设置'
          item.quantityType = null
      }
  }
  
  // 确保总价格不超过五位小数
  item.totalPrice = parseFloat(item.totalPrice.toFixed(5))
}



// 移除已选药品
const removeSelectedItem = (index: number) => {
  selectedItems.value.splice(index, 1)
}

// 清空已选药品
const clearSelected = () => {
  selectedItems.value = []
}

// 保存处方记录到后端API
const savePrescriptionRecord = () => {
  // 准备药品数据 - 转换为后端所需的JSON格式
  const prescriptionData = selectedItems.value.map(item => {
    return {
      id: item.id,
      name: item.name,
      grams: item.grams,
      bags: item.bags,
      kilograms: item.kilograms,
      totalPrice: item.totalPrice, // 单个药品小计
      quantityType: item.quantityType
    }
  })

  // 准备要发送的数据
  const prescriptionRecord = {
    patient_id: patientInfo.value.id, // 患者ID
    prescription_name: `${patientInfo.value.patientName}的处方`, // 药方名称
    prescription_data: JSON.stringify(prescriptionData), // 药品数据，转为JSON字符串
    ji: prescriptionDose.value, // 剂量（包数）
    price: singleDosePrice.value, // 单剂价格
    total_price: finalTotalPrice.value, // 总价格
    patient_data: JSON.stringify(patientInfo.value), // 患者信息，转为JSON字符串
  }

  // 调用API保存处方记录
  createSysPrescriptionRecord(prescriptionRecord)
    .then(response => {
      if (response.data && response.data.code === 0) {
        ElMessage.success('处方保存成功')
      } else {
        ElMessage.error(`处方保存失败: ${response.data?.msg || '未知错误'}`)
      }
    })
    .catch(err => {
      ElMessage.error(`处方保存失败: ${err.message || '未知错误'}`)
      console.error('保存处方记录出错:', err)
    })
}

// 打印小票
const printReceipt = () => {
  if (selectedItems.value.length === 0) {
    ElMessage.warning('没有选择任何药品')
    return
  }

  // 构建患者信息HTML
  const info = patientInfo.value
  const patientInfoHtml = `
    <div class="patient-info-print">
      <div class="receipt-subtitle">患者信息</div>
      <div class="patient-info-item">姓名: ${info.patientName || '--'}</div>
      <div class="patient-info-item">性别: ${info.gender === 1 ? '男' : info.gender === 2 ? '女' : '--'}</div>
      <div class="patient-info-item">年龄: ${info.age || '--'}</div>
      <div class="patient-info-item">身份证: ${info.idCardNumber || '--'}</div>
      <div class="patient-info-item">电话: ${info.phone || '--'}</div>
      <div class="patient-info-item">备注: ${info.remark || '--'}</div>
      <div class="receipt-divider">--------------------------------</div>
    </div>
  `

  // 获取打印区域内容并插入患者信息
  let printContent = document.getElementById('print-area')!.innerHTML
  // 替换原有患者信息(div.patient-info-print)为最新内容
  printContent = printContent.replace(
    /<div class="patient-info-print"[\s\S]*?<\/div>/,
    patientInfoHtml
  )
  
  // 创建打印窗口
  const printWindow = window.open('', '_blank')

  if (printWindow) {
    printWindow.document.write(`
      <html>
        <head>
          <title>中药处方小票</title>
          <style>
            @media print {
              @page {
                size: 58mm auto; /* 58mm宽度的热敏纸 */
                margin: 0mm;
              }
            }
            
            body {
              font-family: "Courier New", monospace; /* 等宽字体更适合小票 */
              width: 58mm; /* 58mm热敏打印纸宽度 */
              margin: 0;
              padding: 0;
              font-size: 12px;
            }
            
            .receipt {
              width: 100%;
              padding: 5px 2px;
              text-align: center;
            }
            
            .receipt-header {
              text-align: center;
              margin-bottom: 10px;
            }
            
            .receipt-title {
              font-size: 14px;
              font-weight: bold;
              margin-bottom: 5px;
            }
            
            .receipt-date {
              font-size: 12px;
              margin-bottom: 5px;
            }
            
            .receipt-divider {
              margin: 5px 0;
              overflow: hidden;
              font-size: 12px;
            }
            
            .receipt-subtitle {
              font-size: 12px;
              font-weight: bold;
              text-align: left;
              margin: 5px 0;
            }
            
            .patient-info-item {
              font-size: 12px;
              text-align: left;
              margin: 2px 0;
            }
            
            .receipt-item-header {
              font-size: 12px;
              display: flex;
              justify-content: space-between;
              text-align: left;
              margin: 5px 0;
            }
            
            .receipt-item {
              text-align: left;
              margin-bottom: 5px;
            }
            
            .item-name {
              font-size: 12px;
              text-align: left;
              width: 100%;
              white-space: normal;
              word-break: break-all;
            }
            
            .item-details {
              display: flex;
              justify-content: space-between;
              margin-top: 2px;
              font-size: 12px;
            }
            
            .item-name-header {
              width: 40%;
              text-align: left;
            }
            
            .item-qty, .item-price, .item-total {
              width: 20%;
              text-align: right;
            }
            
            .receipt-total {
              display: flex;
              justify-content: space-between;
              margin: 5px 0;
              font-weight: bold;
            }
            
            .receipt-footer {
              text-align: center;
              margin-top: 10px;
              font-size: 12px;
            }
          </style>
        </head>
        <body>
          ${printContent}
        </body>
      </html>
    `)
    savePrescriptionRecord()
    printWindow.document.close()
    printWindow.focus()
    printWindow.print()
   
  } else {
    ElMessage.error('打印失败，请检查浏览器是否阻止了弹出窗口')
  }
}

// 获取药品数据
const getTableData = async() => {
  try {
    const response: any = await getSysDrugsList({ page: page.value, pageSize: pageSize.value })
    // 处理响应数据，兼容不同的数据格式
    if (response && (response.code === 0 || response.code === 200)) {
      // 确保我们有正确的数据列表
      const list = response.data?.list || []
      
      // 确保价格字段是数字类型
      const processedList = list.map((item: any) => ({
        ...item,
        g_price: Number(item.g_price || 0),
        dai_price: Number(item.dai_price || 0),
        kg_price: Number(item.kg_price || 0)
      }))
      
      allMedicines.value = processedList
      displayedMedicines.value = [...allMedicines.value]
      total.value = response.data?.total || allMedicines.value.length
    } else {
      ElMessage.warning('获取药品数据失败：响应格式不符合预期')
      console.error('响应格式错误:', response)
    }
  } catch (error) {
    console.error('获取药品数据失败:', error)
    ElMessage.error('获取药品数据失败')
  }
}

// 从URL参数中获取患者信息
const getPatientInfoFromRoute = () => {
  try {
    const patientInfoParam = route.query.patientInfo
    if (patientInfoParam) {
      // 确保处理string或string[]类型
      const paramValue = Array.isArray(patientInfoParam) ? patientInfoParam[0] : patientInfoParam
      
      // 解码并解析JSON数据
      const decodedInfo = decodeURIComponent(paramValue)
      const patientData = JSON.parse(decodedInfo)
      console.log("patientData",patientData)
      // 填充患者信息
      patientInfo.value = {
        id: patientData.id || 0,
        patientName: patientData.patientName || '',
        gender: patientData.gender || '',
        age: new Date().getFullYear() - Number(patientData.age) || 0,
        phone: patientData.phone || '',
        address: patientData.address || '',
        idCardNumber: patientData.idCardNumber || '',
        remark: patientData.remark || '',
      }
      
      // 可以添加一个通知提示患者信息已加载
      ElMessage.success('已加载患者信息')
    }
  } catch (error) {
    console.error('解析患者信息出错:', error)
    ElMessage.error('无法加载患者信息')
  }
}

// 历史记录抽屉引用
const historyDrawerRef = ref()

// 查看处方历史记录
const viewPrescriptionHistory = () => {
  if (patientInfo.value.id) {
    historyDrawerRef.value.open(patientInfo.value.id)
  } else {
    ElMessage.warning('请先选择患者')
  }
}

onMounted(() => {
  // 获取药品数据
  getTableData()
  
  // 尝试从URL参数中获取患者信息
  getPatientInfoFromRoute()
})
</script>

<style scoped lang="scss">
.yaoping-box {
  padding: 20px;
  height: calc(100vh - 100px);
  overflow: hidden;
}

/* 两栏布局 */
.yaoping-layout {
  display: flex;
  height: 100%;
  gap: 20px;
}

/* 左侧药品面板 */
.left-panel {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
}

/* 右侧已选药品面板 */
.right-panel {
  width: 350px;
  transition: all 0.3s ease;
  
  &.has-items {
      width: 400px;
  }
}

.search-container {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  position: sticky;
  top: 0;
  background-color: #f5f7fa;
  padding: 10px 0;
  z-index: 10;
  
  .search-input {
      flex: 1;
  }
}

.medicine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.medicine-block {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
  background-color: white;
  transition: all 0.3s ease;
  cursor: pointer;
  
  &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
      border-color: #409EFF;
  }
  
  .medicine-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #303133;
  }
  
  .medicine-details {
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 14px;
      color: #606266;
      
      span {
          display: block;
      }
  }
}

.selected-area {
  height: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
  background-color: white;
  display: flex;
  flex-direction: column;
  
  .selected-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      
      h3 {
          margin: 0;
          color: #303133;
      }
      
      .actions {
          display: flex;
          gap: 10px;
      }
  }
  
  .empty-message {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .selected-list {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 15px;
  }
  
  .selected-item {
      border: 1px solid #ebeef5;
      border-radius: 4px;
      padding: 12px;
      background-color: #f9f9f9;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      
      .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          border-bottom: 1px dashed #dcdfe6;
          padding-bottom: 8px;
          
          .item-name {
              font-weight: bold;
              font-size: 16px;
              color: #303133;
          }
      }
      
      .item-quantities {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 10px;
          
          .quantity-input {
              display: flex;
              align-items: center;
              gap: 10px;
              
              label {
                  width: 60px;
                  color: #606266;
              }
              
              .el-input-number {
                  width: 100%;
              }
          }
      }
      
      .item-price {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 10px;
          border-top: 1px dashed #dcdfe6;
          padding-top: 8px;
          
          .price-label {
              color: #909399;
              font-size: 14px;
          }
          
          .price-value {
              color: #606266;
              font-size: 14px;
              margin-right: 15px;
              
              &.total {
                  color: #F56C6C;
                  font-weight: bold;
              }
          }
      }
  }
  
  .total-price {
      margin-top: 15px;
      border-top: 1px solid #ebeef5;
      padding-top: 15px;
      
      .price-calculation {
          display: flex;
          flex-direction: column;
          gap: 10px;
          
          .single-dose-price {
              text-align: center;
              font-size: 16px;
              color: #606266;
              padding-bottom: 10px;
              border-bottom: 1px dashed #dcdfe6;
          }
          
          .dose-and-total {
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 20px;
              
              .dose-input {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  
                  label {
                      font-size: 16px;
                      color: #303133;
                      font-weight: 500;
                  }
                  
                  .el-input-number {
                      width: 80px;
                  }
              }
              
              .final-total {
                  font-size: 18px;
                  font-weight: bold;
                  color: #F56C6C;
              }
          }
      }
  }
}

/* 打印小票样式 */
.print-area {
  display: none;
}

@media print {
  body * {
    visibility: hidden;
  }
  
  .print-area, .print-area * {
    visibility: visible;
  }
  
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: block !important;
  }
}

.receipt {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4;
  max-width: 300px;
  margin: 0 auto;
  padding: 10px;
  
  .receipt-header {
    text-align: center;
    margin-bottom: 15px;
    
    h2 {
      margin: 0 0 5px 0;
      font-size: 16px;
      font-weight: bold;
    }
    
    .receipt-date {
      font-size: 10px;
      color: #666;
    }
  }
  
  .receipt-divider {
    text-align: center;
    margin: 5px 0;
    font-family: monospace;
  }
  
  .patient-info {
    margin-bottom: 10px;
    
    .patient-info-item {
      margin-bottom: 3px;
      font-size: 11px;
    }
  }
  
  .receipt-subtitle {
    font-weight: bold;
    text-align: center;
    margin: 10px 0 5px 0;
  }
  
  .receipt-items {
    .receipt-item-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      padding-bottom: 2px;
      border-bottom: 1px solid #000;
      
      .item-name-header {
        flex: 2;
      }
      
      .item-qty, .item-price, .item-total {
        flex: 1;
        text-align: right;
      }
    }
    
    .receipt-item {
      margin-bottom: 8px;
      
      .item-name {
        margin-bottom: 2px;
      }
      
      .item-details {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        
        .item-qty {
          flex: 2;
        }
        
        .item-price, .item-total {
          flex: 1;
          text-align: right;
        }
      }
    }
    
    .receipt-summary {
      margin-top: 8px;
      
      div {
        margin: 3px 0;
        font-size: 11px;
        text-align: left;
      }
      
      .final-total {
        font-size: 12px;
        border-top: 1px solid #000;
        padding-top: 3px;
        margin-top: 8px;
      }
    }
  }
  
  .receipt-footer {
    text-align: center;
    margin-top: 15px;
    font-size: 10px;
    font-style: italic;
  }
}
</style>
